<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="application-name" content="移动版">
    <title>比赛作品</title>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../h5js/zepto.min.js"></script>
    <script src="../h5js/touch.js"></script>
    <script src="../h5js/hhSwipe.js"></script>
    <script src="../h5js/verify.js"></script>
     <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
     <script>
        // 微信扫一扫接口
        var nonceStr = Math.random().toString(16).substring(2); 
        var timestamp = Date.parse(new Date())/1000; 
        var thisUrl = location.href.split('#')[0];
        $.ajax({
                url:"http://yq.mysongktv.cn:8080/MSInfoPlat/weixinqiyeInterface/getSignature.do",
                data:{nonceStr:nonceStr,timestamp:timestamp,url:encodeURI(thisUrl)},
                success:function(res){
                        var jdata = eval("("+res+")");
                        wx.config({
            debug: false,
            appId:"wx1d58ebcff5fc4b22",
            timestamp: timestamp, //必填，生成签名的随机串
            nonceStr: nonceStr, // 必填，生成签名的时间戳
            signature: jdata.message,  // 必填，签名，见附录1
            jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo","onMenuShareQZone"]
        });
                }
        })
        wx.ready(function(){
        	
        	wx.onMenuShareTimeline({
        	    title: '麦颂ktv比赛邀您参加！', // 分享标题
        	    imgUrl: 'http://yq.mysongktv.cn:8080/match/img/logo.png', // 分享图标
        	    success: function () { 
        	        // 用户确认分享后执行的回调函数
        	    },
        	    cancel: function () { 
        	        // 用户取消分享后执行的回调函数
        	    }
        	});
        	
        	
        	wx.onMenuShareAppMessage({
        	    title: '麦颂ktv比赛邀您参加！', // 分享标题
        	    desc: '店面二维码项目参加分析', // 分享描述
        	    imgUrl: 'http://yq.mysongktv.cn:8080/match/img/logo.png', // 分享图标
        	    success: function () { 
        	        // 用户确认分享后执行的回调函数
        	    },
        	    cancel: function () { 
        	        // 用户取消分享后执行的回调函数
        	    }
        	});
        	
        	
        	wx.onMenuShareQQ({
        	    title: '麦颂ktv比赛邀您参加！', // 分享标题
        	    desc: '店面二维码项目参加分析', // 分享描述
        	    imgUrl: 'http://yq.mysongktv.cn:8080/match/img/logo.png', // 分享图标
        	    success: function () { 
        	       // 用户确认分享后执行的回调函数
        	    },
        	    cancel: function () { 
        	       // 用户取消分享后执行的回调函数
        	    }
        	});
        	
        	wx.onMenuShareQZone({
        	    title: '麦颂ktv比赛邀您参加！', // 分享标题
        	    desc: '店面二维码项目参加分析', // 分享描述
        	    imgUrl: 'http://yq.mysongktv.cn:8080/match/img/logo.png', // 分享图标
        	    success: function () { 
        	       // 用户确认分享后执行的回调函数
        	    },
        	    cancel: function () { 
        	        // 用户取消分享后执行的回调函数
        	    }
        	});
        	
        	
        });
 </script>
    
</head>
<body onload="">
<!--头部-->
<header>
    <div class="head">
        <a href="javascript:void(0);" onclick="history.go(-1)"></a>
        <span>比赛作品</span>
		<img src="../img/logo.png" alt="" id="addxuanzhuan">
    </div>
</header>
<section>
    <h3>朝阳区文委歌唱比赛，比赛名称title</h3>

    <div class="sing-details">
        <div class="production" id="right_img">
            <img src="../img/portrait.png" alt="">
        </div>
        <div class="production-details">
            <p>
                <span>参赛选手</span><br>
                <span>昵称 | 姓名</span><span><!--刘亦菲--></span>
            </p>

            <p class="addition">
                <span>票数:</span> <span id="poll-num">199</span><br>
                <span>排名:</span> <span>120</span>
                <span class="add-one" id="add">+1</span>
            </p>
            <a href="javascript:;" class="img-list" id="sharing">
                <img src="../img/share.png" alt="">
                <span>为ta分享</span>
            </a>

            <a href="javascript:;" class="img-list  img_right" id="dot-praise">
                <img src="../img/love.png" alt="" id="img-change">
                <span id="vote-change" id="vote-change">为ta投票</span>
            </a>
        </div>
    </div>
    <div class="song-name">
        <h3>比赛宣言</h3>
        <p class="audio-img"><span class="refuel">为国安呐喊--为国安加油--</span>
        </p>
    </div>
    <div class="song-name">
        <h3>试听--参赛曲名</h3>
		 <audio src="../img/001.mp3" id="audio" controls="controls" class="audio-hidden">
                你的浏览器不支持
            </audio>
        <p class="audio-img"><span>歌曲名称</span>
            <img src="../img/pause.png" alt=""  id="img-play">
        </p>
    </div>
</section>

    <footer>
        <p class="transcribe"><b>录制门店</b><a href="apply-message.html">我也要K歌,立即预定</a></p>
        <div class="self-motion">
            <h4>唱吧麦颂KTV--西直门店</h4>
            <div class="addWrap">
                <div class="swipe" id="mySwipe">
                    <div class="swipe-wrap">
                        <div><a href="javascript:;"><img class="img-responsive" src="../img/001.png"/></a></div>
                        <div><a href="javascript:;"><img class="img-responsive" src="../img/002.png" /></a></div>
						<div><a href="javascript:;"><img class="img-responsive" src="../img/002.png" /></a></div>
                    </div>
                </div>

                <ul id="position" class="menu-list">
                    <li class="cur"></li>
                    <li></li>
					<li></li>
                </ul>
            </div>
        </div>
       <!--  <div class="load-more">
            <p>
                <span>更多</span><a href="over.html" class="game-more">查看比赛详情与更多参赛作品</a>
            </p>
        </div> -->
		   <p class="transcribe"><b>更多</b><a href="over.html">查看比赛详情与更多参赛作品</a></p>
    </footer>
        <!--遮罩层-->
        <div class="mask-layer" id="new-share">
		 <!--分享弹出框-->
        <div class="share-hidden" id="sharing-show">
            <div class="share-direction"><img src="../img/direction.png" alt=""></div>
            <div class="menus">
                <img src="../img/maiya.png" alt="" class="absolot-left">
                <span class="absolot-right">亲,点击右上角,分享到微信或朋友圈,让小伙伴们为你点赞吧&nbsp;!</span>
            </div>
            <div class="abolish"><a href="javascript:; "id="cancel">我知道了</a></div>
        </div>
		</div>
<script>
    var a = document.getElementById("audio");
    var img=document.getElementById("img-play");
    img.onclick= function(){
        if (a.paused) {a.play();} else {
            a.pause()
        }if(img.src.match("pause")){img.src="../img/play.png"}else{
            img.src="../img/pause.png"}
        }
    var bullets = document.getElementById('position').getElementsByTagName('li');

    var banner = Swipe(document.getElementById('mySwipe'), {
        auto: 2000,
        continuous: true,
        disableScroll:false,
        callback: function(pos) {
            var i = bullets.length;
            while (i--) {
                bullets[i].className = ' ';
            }
            bullets[pos].className = 'cur';
        }
    })
	$(function(){
       var heights = window.screen.height+"px";
        document.getElementById("new-share").style.height=heights;
		//alert($("#sharing span").height())
		//alert($("div.production-details").height())
		//var eee =$("div.production-details").height()-$("#sharing span").height();
		//alert(eee)
		//document.getElementById("right_img").style.height= eee+"px";
    })
</script>
</body>
</html>